import { Notification } from 'element-ui'
export default {
    data() {
        return {
            ybfxdSel: false,
            yyfxdVillBack: [
                require('@/assets/map/village/v_1.png'),
                require('@/assets/map/village/v_2.png'),
                require('@/assets/map/village/v_3.png'),
                require('@/assets/map/village/v_4.png')
            ],
            colorsYBFXD: ['#CE1F1F', '#F0810B', '#F0C90B', '#00A2FB']
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        },
        yubaoFenXi_FXD() {
            return this.$store.getters.pageState.yubaoFenXi_FXD
        }
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                if (val.path !== '/prediction/ShortPro/index') {
                    console.log(val.path);
                    this.clearHSFXD()
                }
            },
            // 深度观察监听
            deep: true
        },
        // yubaoFenXi_FXD: {
        //     immediate: true,
        //     deep: true,
        //     handler: function (val, oldVal) {
        //         if (this.$route.path === '/prediction/ShortPro/index') {
        //             if (val) {
        //                 this.getHSFXD()
        //                 this.initEventYYFXD(val.planId)
        //             } else {
        //                 this.clearHSFXD()
        //             }
        //         }
        //     }
        // }
    },
    destroyed() {
        this.clearHSFXD()
    },
    created() {
        this.entities_HS_FXDMap = new Map()
        this.imgs_HS_FXD_Vill = []
        this.yyfxdVillBack.forEach(item => {
            var img = new Image()
            img.src = item
            this.imgs_HS_FXD_Vill.push(img)
        })

        this.$eventBus.$on('EB_YB_HS_Card_Click1', option => {
            console.log('洪水分析-影响村庄图标');
            this.id_YB_HS_Card = option.fnid
            this.getHSFXD()
        })
        this.$eventBus.$on('flyToHSFX', this.flyToHSFX)
    },
    mounted() {
    },
    methods: {
        getHSFXD() {
            this.clearHSFXD();
            this.$store.commit('mapLoadingPush', '请求风险点...')
            this.$api.Get('/api/CalcPreview/GetRiskPoint', {
                ID: this.id_YB_HS_Card
            }).then(res => {
                console.log(res)
                if (res.data && res.data[0].villagelst && res.data[0].villagelst.length > 0) {
                    res.data[0].villagelst.forEach(item => {
                        this.drawHSFXDVill(item)
                    })
                    this.$store.commit('mapLoadingDel', '请求风险点...')
                } else {
                    Notification({
                        message: `此模拟无风险点`,
                        type: 'warning'
                    })
                    this.$store.commit('mapLoadingDel', '请求风险点...')
                    return
                }
            })
        },
        getHSFXDVillImg(img, txt) {
            return new Promise((resolve, reject) => {
                var size = 15
                var canvas = document.createElement('canvas')
                canvas.width = img.width * 1 // + 1有的字体较宽
                canvas.height = img.height * 1 // + 0.5有的字体较宽
                var ctx = canvas.getContext('2d')
                ctx.scale(2, 2) // 清晰一些

                ctx.drawImage(img, 0, 0, canvas.width / 2, canvas.height / 2)

                ctx.shadowOffsetX = -5 // 用来设定阴影在 X轴的延伸距
                ctx.shadowOffsetY = 5 // 用来设定阴影在 Y轴的延伸距
                ctx.shadowBlur = 0 // 设定阴影的模糊程度 默认0
                ctx.shadowColor = 'rgba(0, 0, 0, 0.85)' // 设定阴影颜色效果
                ctx.font = `bold ${size}px BlenderPro`
                ctx.textAlign = 'center'
                ctx.textBaseline = 'top'
                ctx.fillStyle = '#FFF'

                ctx.fillText(txt, canvas.width / 4, 10)

                const image = new Image()
                image.src = canvas.toDataURL('image/png')
                resolve(image)
            })
        },
        drawHSFXDVill(item) {
            var lv = Number(item.level) - 1
            var img = this.imgs_HS_FXD_Vill[lv]
            var name = item.ewName
            var ewCode = item.ewCode
            if (name.length > 4) {
                name = name.substring(0, 4) + '...';
            }
            // this.$eventBus.$emit('FZCHideXZC', ewCode)
            this.getHSFXDVillImg(img, name).then(image => {
                var entityBill = {
                    eventName: 'YYFXD',
                    prop: item,
                    position: Cesium.Cartesian3.fromDegrees(
                        Number(item.lgtd),
                        Number(item.lttd),
                        20
                    ),
                    billboard: {
                        scale: 1,
                        image: image,
                        width: image.width / 2,
                        height: image.height / 2,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, this.$config.mapConfig.pb_far)
                    }
                }
                this.entities_HS_FXDMap.set(item.ewCode, this.$viewer.entities.add(entityBill))
            })
            this.initEventYYFXD()
        },
        clearHSFXD() {
            console.log(this.entities_HS_FXDMap);
            if (this.entities_HS_FXDMap && this.entities_HS_FXDMap.size > 0) {
                this.entities_HS_FXDMap.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                // this.entities_HS_FXDMap = new Map()
            }
            if (this.screenSpaceEventHandlerYBFXD) {
                this.screenSpaceEventHandlerYBFXD.destroy()
                this.screenSpaceEventHandlerYBFXD = null
            }
        },
        flyToHSFX(id) {
            var entity = this.entities_HS_FXDMap.get(id)
            if (entity) {
                this.$viewer.flyTo(entity, {
                    duration: 0.5,
                    offset: {
                        heading: this.$viewer.camera.heading,
                        pitch: this.$viewer.camera.pitch,
                        range: 1000
                    }
                })
            }
        },
        initEventYYFXD(id) {
            var eventFn = pickedObject => {
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName
                ) {
                    console.log(pickedObject)
                    if (pickedObject.id.eventName === 'YYFXD') {
                        const dlgParams = this.$store.getters.dlgParams
                        dlgParams.name = 'DLGYYFXD'
                        console.log(pickedObject.id.prop)
                        pickedObject.id.prop['rvcd'] = pickedObject.id.prop.ewCode
                        pickedObject.id.prop['Ewcode'] = pickedObject.id.prop.ewCode
                        pickedObject.id.prop['id'] = id
                        // dlgParams.params = { ID: id, prop: pickedObject.id.prop }
                        dlgParams.params = pickedObject.id.prop// { ID: id, prop: pickedObject.id.prop }
                        this.$store.dispatch('dlgParams', dlgParams)
                    }
                    if (pickedObject.id.eventName === 'YYFXDType') {
                        const dlgParams = this.$store.getters.dlgParams
                        dlgParams.name = 'DLGYYFXD'
                        console.log(pickedObject.id.prop)
                        pickedObject.id.prop['rvcd'] = pickedObject.id.prop.townAdcd
                        pickedObject.id.prop['Ewcode'] = pickedObject.id.prop.townAdcd
                        pickedObject.id.prop['id'] = id
                        // dlgParams.params = { ID: id, prop: pickedObject.id.prop }
                        dlgParams.params = pickedObject.id.prop// { ID: id, prop: pickedObject.id.prop }
                        this.$store.dispatch('dlgParams', dlgParams)
                    }
                }
            }
            this.$eventBus.$on('UE_RehearsalYYFXD', res => {
                eventFn(res)
            })
            this.$store.getters.eventCesiumOption.leftPickFns.set('YYFXD', eventFn)

        },
    }
}
